<template>
	<view class="main">
		<view class="head">
			<view class="headBack"></view>
			<view class="headSearch">
				<view class="headSearch-l">
					<view class="headSearch-lIcon">
						<u-icon name="search" size="34" color="#A7A7A7"></u-icon>
					</view>
					<view class="headSearch-lInput">
						<input type="text" placeholder-style="font-size:28rpx" placeholder="关键词搜索物品" />
					</view>
					<view class="headSearch-lText">
						搜索
					</view>
				</view>
				<view class="headSearch-r" @click="scanQRCode">
					<image src="/static/liang/qrcode.png" mode=""></image>
				</view>
			</view>
			<view class="headSwiper">
				<u-swiper :list="list" height="340" radius="20"></u-swiper>
			</view>
		</view>
		<view class="icon">
			<view class="iconItem" v-for="(item,i) in catelist" @click="openGoodsCategory(item)">
				<image :src="item.image" mode=""></image>
				<view class="iconItem-text">
					{{item.name}}
				</view>
			</view>
			
			<view class="iconItem" >
				<image src="/static/icons/8.png" mode=""></image>
				<view class="iconItem-text">
					其它服务
				</view>
			</view>
		</view>
		<view class="multifunction">
			<view class="multifunction-l">
				<view class="multifunction-lItem" style="background: #FFEFEF;margin-bottom: 30rpx;" @tap="goshop1()">
					<view class="multifunction-lItem-t">
						消费送易货额
					</view>
					<view class="multifunction-lItem-b">
						易货就送易货额
					</view>
				</view>
				<view class="multifunction-lItem" style="background: #FFFFF3;" @tap="goshop2()">
					<view class="multifunction-lItem-t">
						易货置换区
					</view>
					<view class="multifunction-lItem-b">
						天天捡漏
					</view>
				</view>
			</view>
			<view class="multifunction-r" style="background: #FEF9FF;" @tap="govideo()">
				<view class="multifunction-rT">
					视频专区
				</view>
				<view class="multifunction-rB">
					自媒体中心
				</view>
			</view>
		</view>
		<view class="list">
			
			<view class="listItem" v-for="(item,i) in goodslist">
				<view class="listItem-imgs" @tap="togoods(item.id)">
					
					<image :src="item.image" mode="aspectFit"></image>
				</view>
				<view class="listItem-title">
					{{item.title}}
				</view>
				<view class="listItem-money">
					{{item.price}}
				</view>
				<view class="listItem-sales">
					销量:{{item.views}}
				</view>
				<view class="listItem-text">
					享乐汇
				</view>
			</view>			
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import jvue from '@/libs/jdk/jvue';
	
	export default {
		data() {
			return {
				list: [
				          "https://kd.ldcr.top/h5/images/banner.png",
				          "https://kd.ldcr.top/h5/images/banner.png",
				   
				],
				catelist:[],
				goodslist:[],
			};
		},
		onLoad(e){
			this.getShopCategoryList();
			this.getGoodsList();
			
		},
		methods: {
			/**
			 * 扫描二维码功能
			 * 在微信公众号H5中使用微信JSSDK的scanQRCode方法
			 * 支持处理URL链接、商品ID、订单ID等不同类型的二维码
			 */
			scanQRCode() {
				// 判断是否在微信环境中
				if (!this.$jssdk.isWechat()) {
					uni.showToast({
						title: '请在微信中使用此功能',
						icon: 'none'
					});
					return;
				}
				
				// 初始化微信JSSDK
				// 注意：需要确保后端返回的配置中包含scanQRCode权限
				this.$jssdk.initJssdk(() => {
					// 调用微信JSSDK的扫码接口
					const wechat = require("@/common/libs/jssdk/wechat");
					wechat.ready(() => {
						console.log('开始调用微信扫码功能');
						wechat.scanQRCode({
							needResult: 1, // 1返回扫描结果，0直接处理结果
							scanType: ["qrCode", "barCode", 'scanQRCode'], // 可以指定扫二维码还是一维码，默认二者都有
							success: (res) => {
								console.log('扫描成功：', res);
								// 获取扫描结果
								const scanResult = res.resultStr;
								console.log('扫描结果内容：', scanResult);
								
								// 判断扫描结果类型并进行相应处理
								if (scanResult) {
									// 如果是URL链接，直接跳转到webview页面显示链接内容
									if (scanResult.startsWith('http://') || scanResult.startsWith('https://')) {
										//jvue.toUrl('/pages/page/index?url=' + encodeURIComponent(scanResult));
										//jvue.toUrl('/city/new_pages/user?url=' + encodeURIComponent(scanResult));
										//jvue.toUrl('/pages/user/auth/auth?url=' + encodeURIComponent(scanResult));
										//alert("扫结果:"+scanResult);
										//jvue.toUrl(encodeURIComponent(scanResult));
										//https://xlh.hanyuai.online/h5/#
										var url = scanResult.split('#')[1];
										//alert("扫结果:"+url);
										jvue.toUrl(url);
										//uni.reLaunch({url:scanResult});
									} 
									// 如果是商品ID格式（以goods_开头），跳转到商品详情页
									else if (scanResult.startsWith('goods_')) {
										const goodsId = scanResult.replace('goods_', '');
										jvue.toUrl('/pages/product/goods?id=' + goodsId);
									}
									// 如果是订单ID格式（以order_开头），跳转到订单详情页
									else if (scanResult.startsWith('order_')) {
										const orderId = scanResult.replace('order_', '');
										jvue.toUrl('/pages/user/order/detail?id=' + orderId);
									}
									// 其他情况显示扫描结果内容
									else {
										uni.showModal({
											title: '扫描结果',
											content: scanResult,
											showCancel: false,
											confirmText: '确定'
										});
									}
								}
							},
							fail: (err) => {
								console.error('扫描失败：', err);
								// 如果是用户取消扫描，不显示错误提示
								if (err.errMsg && !err.errMsg.includes('cancel')) {
									// 提示更详细的错误信息
									let errorMsg = err.errMsg || '请重试';
									// 特殊处理权限错误
									if (errorMsg.includes('offline verifying')) {
										errorMsg = '扫码权限验证失败，请刷新页面重试';
									}
									uni.showToast({
										title: '扫描失败：' + errorMsg,
										icon: 'none',
										duration: 3000
									});
								} else if (!err.errMsg) {
									// 如果没有错误信息，显示通用错误提示
									uni.showToast({
										title: '扫描失败，请刷新页面重试',
										icon: 'none',
										duration: 3000
									});
								}
							},
							complete: (res) => {
								console.log('扫码功能调用完成：', res);
							}
						});
					});
				});
			},
			
			getShopCategoryList(){
				var that = this;
				var url = "/streetapi/shopcategorylist";							
				uni.request({
					url: url,
					method: 'GET',
					data: {
						id:0,
					},
					success: res => {						
						console.log('clicked', res.data);		
						that.catelist = res.data.data;
						uni.hideLoading();
					},
					fail: () => {},
					complete: () => {}
				});
			},
			togoods(id){
				let url ="/pages/product/goods?id=" + id;
				jvue.toUrl(url);
			},
			goshop1(){
				
				let url = "/pages/product/list";
				jvue.toUrl(url);
			},
			goshop2(){
				let url = "/pages/product/list";
				jvue.toUrl(url);
			},
			govideo(){
				let url = "/pages/shop/live/live";
				jvue.toUrl(url);
			},
			openGoodsCategory(item){
				var url = "/pages/product/list?data={category_id:"+item.id+",category_name:"+item.name+"}";
				url+"&category_id="+item.id+"&category_name="+item.name;
				console.log(url);
				url = "/pages/product/list";
				jvue.toUrl(url);
				uni.redirectTo({url:url	});
			},
			getGoodsList(){
				var that = this;
				var url = "/xiangapi/goodslist";							
				uni.request({
					url: url,
					method: 'GET',
					data: {
						id:0,
					},
					success: res => {						
						console.log('clicked', res.data);		
						that.goodslist = res.data.data;
						uni.hideLoading();
					},
					fail: () => {},
					complete: () => {}
				});
			},
		},
	};
</script>

<style>
	.main {
		background: #F6F4F7;
	}

	.headBack {
		background: #FF5429;
		width: 100%;
		height: 330rpx;
		border-radius: 0 0 100rpx 100rpx;
	}

	.headSearch {
		margin: 0 30rpx;
		display: flex;
		position: relative;
		align-items: center;
		top: -280rpx;
	}

	.headSearch-l {
		background: #fff;
		display: flex;
		padding: 20rpx 30rpx;
		border-radius: 50rpx;
		margin-right: 30rpx;
		flex: 1;
		align-items: center;
	}

	.headSearch-lIcon {
		margin-right: 14rpx;
	}

	.headSearch-lInput {
		flex: 1;
	}

	.headSearch-r image {
		width: 68rpx;
		height: 68rpx;
	}

	.headSearch-lText {
		color: #A7A7A7;
		border-left: 2rpx solid #A7A7A7;
		padding-left: 20rpx;
	}

	.headSwiper {
		margin: 0 30rpx;
		position: relative;
		top: -240rpx;
	}

	.icon {
		background: #fff;
		margin: 0 30rpx;
		position: relative;
		top: -220rpx;
		border-radius: 10rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.iconItem {
		width: 20%;
		text-align: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.iconItem image {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}

	.multifunction{
		display: flex;
		position: relative;
		top: -200rpx;
		margin: 0 30rpx;
		justify-content: space-between;
	}
	.multifunction-l{
		width: calc(50% - 15rpx);
	}
	.multifunction-lItem,.multifunction-r{
		padding: 30rpx;
		border-radius: 20rpx;
	}
	.multifunction-r{
		width: calc(50% - 15rpx);
	}
	.multifunction-lItem-t,.multifunction-rT{
		font-weight: 600;
		font-size: 34rpx;
		margin-bottom: 10rpx;
	}
	.multifunction-lItem-b,.multifunction-rB{
		color: #FF5429;
	}
</style>


<style>
	@import "goodslist";
</style>